<template>
	<view>
		<view class="top">
			 <view class="search">
				 
				 <input type="text" />
				 <span class="icon iconfont icon-sousuo"></span>
			 </view>
			 <view class="select">
				 <text>筛选</text>
				 <span class="icon iconfont icon-57shaixuan"></span>
			 </view>
		</view>
		
		 <view class="list" v-for="item in list" :key="item.id">
		 	 <image :src="baseImg+item.logo" mode=""></image>
			 <view class="right">
				 <view class="title">
					 <view class="tit">{{item.name}}</view>
					 <view class="cat">
					 	{{item.services}}
					 </view>
				 	
				 </view>
				 <view class="btn">
				 	 <button plain="true" type="default">查看详情</button>
				 </view>
			 </view>
		 </view>
		 <view v-if="!hasMore" class="more">
		 	没有更多数据
		 </view>
		 
		 
	</view>
</template>

<script>
	import {BASE_IMG_URL} from '../../utils/config.js'
	import {getStoreList} from '../../service/stores.js'
	export default {
		data() {
			return {
				baseImg:BASE_IMG_URL,
				hasMore:true,
				params:{page:1,psize:10,key:"",services:""},
				list:[]
			}
		},
		onLoad() {
			
			this.getData();
			
		},
		onPullDownRefresh(){
			
			console.log("下拉刷新");
			this.hasMore=true;
			this.params.page=1;
			this.getData();
			
		},
		onReachBottom() {
			 
			if(this.hasMore){
				this.params.page++;
				this.getData();
			}
			else{
				console.log("没有更多数据");
			}
			
			
			
		},
		methods: {
			
			async getData(){
				const {errCode,data}=await getStoreList(this.params).catch(()=>{});
				 uni.stopPullDownRefresh();
				if(errCode===10000){
					 
					if(data.list.length==0){
						this.hasMore=false;
						return;
					}
					 
					if(this.params.page===1){
						this.list=data.list;
					}
					else{
						 this.list=[...this.list,...data.list];
					}
					
					
					
					
					
				}
		   
			}
			
		}
	}
</script>

<style lang="less">
	
	 page{
		 background: #f1f5f8;
	 }
	 .top{
		 width: 100%;
		 height: 150rpx;
		 background: #ffffff;
		 display: flex;
		 justify-content: space-between;
		 padding: 0 25rpx;
		 box-sizing: border-box;
		 align-items: center;
		 .search{
			 
			 height: 88rpx;
			 background: #f4f6f5;
			 flex: 1;
			 margin-right: 25rpx;
			 border-radius: 44rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 20rpx;
			box-sizing: border-box;
			input{
			 
				flex: 1;
				height: 100%;
			}
			.icon-sousuo{
				font-size: 32px;
				color: #999999;
			}
		 }
		 .select{
			 width: 230rpx;
			 height: 88rpx;
			 background: #f4f6f5;
			 border-radius: 44rpx;
			 display: flex;
			 //贴边
			 justify-content: space-between;
			 //垂直居中
			 align-items: center;
			 padding: 0 20rpx;
			 box-sizing: border-box;
			 .icon-57shaixuan{
				 font-size:36rpx;
			 }
			 
		 }
	 }
	 .list{
		 margin:20rpx 20rpx;
		 background: #ffffff;
		 padding: 15rpx;
		 display: flex;
		 image{
			 width: 185rpx;
			 height: 185rpx;
			 border-radius: 10rpx;
		 }
		 .right{
			 flex: 1;
			  height: 185rpx;
			  margin-left: 26rpx;
			  display: flex;
			  flex-direction: column;
			  justify-content: space-between;
			  align-items: flex-start;
			  .btn{
				 
				  
			  }
			  .title{
				 line-height: 50rpx;
			  }
			  
			  button{
				  background: #5eadf0;
				  border: none;
				  width: 124rpx;
				  height: 40rpx;
				  padding: 0px;
				  line-height: 40rpx;
				  font-size: 24rpx;
				  justify-content: center;
				  color: #ffffff;
			  }
			 
		 }
	 }
.more{
	 height:80rpx;
	display: flex;
	justify-content: center;
	align-items: center;
}
</style>
